<template>
	<view>
		<view class="pl">
			<view class="item">
				<image src="../../static/1.jpg"></image>
				<view class="info">
					<view class="user">
						<view class="name">
							游杰
						</view>
						<view class="wjx">
							★★★★★
						</view>
					</view>
					<view class="date text-desc">
						2018-9-6 12:59:58
					</view>
					<view class="content">
						这次活动非常好,但是我不喜欢!!!!
					</view>
				</view>
			</view>
			<view class="imgs">
				<image :src="item" @tap="preImg(imgs,index)" v-for="(item,index) of imgs" :key="index"></image>
			</view>
		</view>
		
		<view class="pl">
			<view class="item">
				<image src="../../static/1.jpg"></image>
				<view class="info">
					<view class="user">
						<view class="name">
							游杰
						</view>
						<view class="wjx">
							★★★★★
						</view>
					</view>
					<view class="date text-desc">
						2018-9-6 12:59:58
					</view>
					<view class="content">
						这次活动非常好,但是我不喜欢!!!!
					</view>
				</view>
			</view>
			<view class="imgs">
				<image :src="item" @tap="preImg(imgs,index)" v-for="(item,index) of imgs" :key="index"></image>
			</view>
		</view>
		
		<view class="pl">
			<view class="item">
				<image src="../../static/1.jpg"></image>
				<view class="info">
					<view class="user">
						<view class="name">
							游杰
						</view>
						<view class="wjx">
							★★★★★
						</view>
					</view>
					<view class="date text-desc">
						2018-9-6 12:59:58
					</view>
					<view class="content">
						这次活动非常好,但是我不喜欢!!!!
					</view>
				</view>
			</view>
			<view class="imgs">
				<image :src="item" @tap="preImg(imgs,index)" v-for="(item,index) of imgs" :key="index"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Comment',
		data: function () {
			return { 
				imgs: ['https://gw.alicdn.com/tfs/TB13kEnx21TBuNjy0FjXXajyXXa-2224-1018.png', 'https://gw.alicdn.com/tfs/TB1EsAqyNGYBuNjy0FnXXX5lpXa-2356-2558.png']
			};
		},
		methods: {
			preImg(imgs,index) {
				// 预览图片
				uni.previewImage({
					current:index,
					urls: imgs
				});
			}
		}
	}
</script>

<style scoped>
	.pl {
		padding: 20px 30px;
		background: #fff;
		margin-bottom: 25px;
	}

	.item {
		display: flex;
	}

	.item>image {
		width: 100px;
		height: 100px;
		border-radius: 50%;
	}

	.item .info {
		flex: 1;
		padding: 0 0px 0 20px;
	}

	.item .info .user {
		display: flex;
		justify-content: space-between;
		font-size: 35px;
	}

	.item .info .content {
		margin-top: 10px;
	}

	.pl .imgs {
		display: flex;
		justify-content: flex-end;
		flex-wrap: wrap;
	}

	.pl .imgs image {
		width: 100px;
		height: 100px;
		margin: 25px 10px 0;
	}

	.wjx {
		color: #f32;
	}
</style>
